<template>
    
      <!-- 表单部分 -->
      <el-form label-width="170px">
        <el-row :gutter="20">
          <!-- 遍历字段生成文本显示 -->
          <el-col :span="8" v-for="(field, index) in fields" :key="index">
            <el-form-item :label="field.label" :required="field.required">
              <label> {{ form[field.prop] }}</label>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 表格部分 -->
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="product_name_and_specification" label="商品名称及规格" :min-width="180" />
        <el-table-column prop="product_number" label="商品编号" :min-width="180" />
        <el-table-column prop="quantity_and_unit" label="数量及单位" :min-width="180" />
        <el-table-column prop="price_and_total_price_and_currency" label="单价/总价/币制" :min-width="180" />
        <el-table-column prop="country_of_origin" label="原产国" :min-width="180" />
        <el-table-column prop="destination_country" label="目的国" :min-width="180" />
        <el-table-column prop="domestic_destination" label="境内目的地" :min-width="180" />
        <el-table-column prop="exemption" label="征免" :min-width="180" />
      </el-table>
    
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  
  const props = defineProps({
    row: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    }
  });
  
  const dialogVisible = ref(props.visible);
  const form = ref({ ...props.row.declaration });
  const tableData = ref([...props.row.product]);
  
  const fields = ref([
    { label: '报关单标题', prop: 'title' },
    { label: '报关单号', prop: 'number' },
    { label: '预录入编号', prop: 'pre_entry_number' },
    { label: '海关编号', prop: 'customs_number' },
    { label: '国内收货人', prop: 'domestic_consignee' },
    { label: '进境口岸', prop: 'entry_port' },
    { label: '进口日期', prop: 'import_date' },
    { label: '申报日期', prop: 'declaration_date' },
    { label: '境外发货人', prop: 'foreign_shipper' },
    { label: '运输方式', prop: 'transport_mode' },
    { label: '运输工具名称及航次号', prop: 'transport_tool_name_and_trip_number' },
    { label: '提运单号', prop: 'consignment_number' },
    { label: '存放地点', prop: 'storage_location' },
    { label: '消费使用单位', prop: 'consumer_unit' },
    { label: '监管方式', prop: 'supervision_mode' },
    { label: '征免性质', prop: 'exemption_type' },
    { label: '启运港', prop: 'departure_port' },
    { label: '合同协议号', prop: 'contract_number' },
    { label: '贸易国', prop: 'trade_country' },
    { label: '启运国', prop: 'departure_country' },
    { label: '经停港', prop: 'stopover_port' },
    { label: '入境口岸', prop: 'port_of_entry' },
    { label: '包装种类', prop: 'packaging_type' },
    { label: '件数', prop: 'package_count' },
    { label: '毛重', prop: 'gross_weight' },
    { label: '净重', prop: 'net_weight' },
    { label: '成交方式', prop: 'transaction_type' },
    { label: '随附单证', prop: 'attached_documents' },
    { label: '备注', prop: 'remarks' },
    { label: '特殊关系确认', prop: 'special_relationship_confirmation' },
    { label: '价格影响确认', prop: 'price_impact_confirmation' },
    { label: '特许权使用费确认', prop: 'royalty_fee_confirmation' },
    { label: '价格公式确认', prop: 'price_formula_confirmation' },
    { label: '暂定价格确认', prop: 'provisional_price_confirmation' },
    { label: '自报自缴', prop: 'self_reported_and_paid' },
    { label: '申报人员证书号', prop: 'declaration_staff_certificate' },
    { label: '申报单位', prop: 'declaration_company' }
  ]);
  
  watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal;
  });
  
  watch(() => props.row, (newVal) => {
    form.value = { ...newVal.declaration };
    tableData.value = [...newVal.product];
  });
  </script>
  
  <style scoped>
  /* 表单项的标签 */
  .el-form-item__label {
    font-weight: bold;
  }
  
  /* 表单项的文本 */
  .el-form-item__content span {
    display: block;
    padding: 5px 0;
  }
  
  /* 表单项的内容 */
  .el-form-item__content {
    display: flex;
    align-items: center;
  }
  
  /* 表格的操作按钮 */
  .el-button--danger {
    margin-left: 10px;
  }
  </style>